<template><div><h1 id="tablepro-高级表格" tabindex="-1"><a class="header-anchor" href="#tablepro-高级表格" aria-hidden="true">#</a> TablePro-高级表格</h1>
<p>很多需要数据展示的表格页面千篇一律，所以封装常用的 table 组件以能够快速构建表格页面。</p>
<h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2>
<h3 id="基础用法" tabindex="-1"><a class="header-anchor" href="#基础用法" aria-hidden="true">#</a> 基础用法</h3>
<tablePro></tablePro>
<div class="language-typescript ext-ts line-numbers-mode"><pre v-pre class="language-typescript"><code><span class="token operator">&lt;</span>template<span class="token operator">></span>
  <span class="token operator">&lt;</span>ConfigProvider <span class="token operator">:</span>locale<span class="token operator">=</span><span class="token string">"zhCN"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>TablePro <span class="token operator">:</span>columns<span class="token operator">=</span><span class="token string">"columns"</span> <span class="token operator">:</span>data<span class="token operator">=</span><span class="token string">"getData"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>TablePro<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>ConfigProvider<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
<span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token keyword">import</span> TablePro<span class="token punctuation">,</span> <span class="token punctuation">{</span> ColumnsProType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antdv-pro-components'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> zhCN <span class="token keyword">from</span> <span class="token string">'ant-design-vue/es/locale/zh_CN'</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token generic-function"><span class="token function">ref</span><span class="token generic class-name"><span class="token operator">&lt;</span>ColumnsProType<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'姓名'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'年龄'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'age'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">getData</span> <span class="token operator">=</span> <span class="token punctuation">(</span>p<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://rap2api.taobao.org/app/mock/294153/getTableData?pageSize=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageSize<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;pageNo=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageNo<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> ress <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> ress<span class="token punctuation">.</span>obj
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="带搜索表单的表格" tabindex="-1"><a class="header-anchor" href="#带搜索表单的表格" aria-hidden="true">#</a> 带搜索表单的表格</h3>
<p>预设的 form 表单项有 input,select,timePicker,datePicker
select 需要配合 selectOptions 使用</p>
<TableProWithForm></TableProWithForm>
<div class="language-typescript ext-ts line-numbers-mode"><pre v-pre class="language-typescript"><code><span class="token operator">&lt;</span>template<span class="token operator">></span>
  <span class="token operator">&lt;</span>ConfigProvider <span class="token operator">:</span>locale<span class="token operator">=</span><span class="token string">"zhCN"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>TablePro <span class="token operator">:</span>columns<span class="token operator">=</span><span class="token string">"columns"</span> <span class="token operator">:</span>data<span class="token operator">=</span><span class="token string">"getData"</span> <span class="token operator">:</span>show<span class="token operator">-</span>search<span class="token operator">-</span>form<span class="token operator">=</span><span class="token string">"true"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>TablePro<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>ConfigProvider<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
<span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token keyword">import</span> TablePro<span class="token punctuation">,</span> <span class="token punctuation">{</span> ColumnsProType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antdv-pro-components'</span>
<span class="token keyword">import</span> zhCN <span class="token keyword">from</span> <span class="token string">'ant-design-vue/es/locale/zh_CN'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'18'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'19'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token number">19</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'20'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token generic-function"><span class="token function">ref</span><span class="token generic class-name"><span class="token operator">&lt;</span>ColumnsProType<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'姓名'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> showInForm<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> formItemType<span class="token operator">:</span> <span class="token string">'input'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'年龄'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> showInForm<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> formItemType<span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> selectOptions <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'地址'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'address'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">getData</span> <span class="token operator">=</span> <span class="token punctuation">(</span>p<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://rap2api.taobao.org/app/mock/294153/getTableData?pageSize=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageSize<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;pageNo=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageNo<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> ress <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> ress<span class="token punctuation">.</span>obj
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="更复杂的表单" tabindex="-1"><a class="header-anchor" href="#更复杂的表单" aria-hidden="true">#</a> 更复杂的表单</h3>
<TableProWithComplexForm></TableProWithComplexForm>
<div class="language-typescript ext-ts line-numbers-mode"><pre v-pre class="language-typescript"><code><span class="token operator">&lt;</span>template<span class="token operator">></span>
  <span class="token operator">&lt;</span>ConfigProvider <span class="token operator">:</span>locale<span class="token operator">=</span><span class="token string">"zhCN"</span><span class="token operator">></span>
     <span class="token operator">&lt;</span>TablePro <span class="token operator">:</span>columns<span class="token operator">=</span><span class="token string">"columns"</span> <span class="token operator">:</span>data<span class="token operator">=</span><span class="token string">"getData"</span> <span class="token operator">:</span>show<span class="token operator">-</span>search<span class="token operator">-</span>form<span class="token operator">=</span><span class="token string">"true"</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>template #formItem<span class="token operator">=</span><span class="token string">"{ column, model }"</span><span class="token operator">></span>
          <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"column.dataIndex === 'address'"</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>Cascader v<span class="token operator">-</span>model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">"model.address"</span> <span class="token operator">:</span>options<span class="token operator">=</span><span class="token string">"cityOptions"</span> <span class="token operator">/</span><span class="token operator">></span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>TablePro<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>ConfigProvider<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
<span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token keyword">import</span> zhCN <span class="token keyword">from</span> <span class="token string">'ant-design-vue/es/locale/zh_CN'</span>
<span class="token keyword">import</span> <span class="token string">'ant-design-vue/es/cascader/style/index.css'</span>
<span class="token keyword">import</span> TablePro<span class="token punctuation">,</span> <span class="token punctuation">{</span> ColumnsProType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antdv-pro-components'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider<span class="token punctuation">,</span> Cascader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'18'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'19'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token number">19</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'20'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> cityOptions <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token string">'zhejiang'</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">'Zhejiang'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'hangzhou'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'Hangzhou'</span><span class="token punctuation">,</span>
        children<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token string">'xihu'</span><span class="token punctuation">,</span>
            label<span class="token operator">:</span> <span class="token string">'West Lake'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token string">'jiangsu'</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">'Jiangsu'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'nanjing'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'Nanjing'</span><span class="token punctuation">,</span>
        children<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token string">'zhonghuamen'</span><span class="token punctuation">,</span>
            label<span class="token operator">:</span> <span class="token string">'Zhong Hua Men'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token generic-function"><span class="token function">ref</span><span class="token generic class-name"><span class="token operator">&lt;</span>ColumnsProType<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'姓名'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> showInForm<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> formItemType<span class="token operator">:</span> <span class="token string">'input'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'年龄'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> showInForm<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> formItemType<span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> selectOptions <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'地址'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> showInForm<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">getData</span> <span class="token operator">=</span> <span class="token punctuation">(</span>p<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://rap2api.taobao.org/app/mock/294153/getTableData?pageSize=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageSize<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;pageNo=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageNo<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> ress <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> ress<span class="token punctuation">.</span>obj
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="直接返回数组的数据" tabindex="-1"><a class="header-anchor" href="#直接返回数组的数据" aria-hidden="true">#</a> 直接返回数组的数据</h3>
<TableProWithArrayData></TableProWithArrayData>
<div class="language-typescript ext-ts line-numbers-mode"><pre v-pre class="language-typescript"><code><span class="token operator">&lt;</span>template<span class="token operator">></span>
  <span class="token operator">&lt;</span>ConfigProvider <span class="token operator">:</span>locale<span class="token operator">=</span><span class="token string">"zhCN"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>TablePro <span class="token operator">:</span>columns<span class="token operator">=</span><span class="token string">"columns"</span> <span class="token operator">:</span>data<span class="token operator">=</span><span class="token string">"getData"</span> v<span class="token operator">-</span>model<span class="token operator">:</span>dataSource<span class="token operator">=</span><span class="token string">"data"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>TablePro<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>ConfigProvider<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
<span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token keyword">import</span> TablePro<span class="token punctuation">,</span> <span class="token punctuation">{</span> ColumnsProType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antdv-pro-components'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> zhCN <span class="token keyword">from</span> <span class="token string">'ant-design-vue/es/locale/zh_CN'</span>

<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token generic-function"><span class="token function">ref</span><span class="token generic class-name"><span class="token operator">&lt;</span>ColumnsProType<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'姓名'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'年龄'</span><span class="token punctuation">,</span> dataIndex<span class="token operator">:</span> <span class="token string">'age'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">getData</span> <span class="token operator">=</span> <span class="token punctuation">(</span>p<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://rap2api.taobao.org/app/mock/294153/getTableData?pageSize=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageSize<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;pageNo=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>pageNo<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> ress <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> ress<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>list
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2>
<p>基于<a href="https://www.antdv.com/components/table-cn#API" target="_blank" rel="noopener noreferrer"><code v-pre>antdv table</code><ExternalLinkIcon/></a>组件，兼容<code v-pre> table</code>组件的所有 <code v-pre>API</code></p>
<h3 id="formpro" tabindex="-1"><a class="header-anchor" href="#formpro" aria-hidden="true">#</a> FormPro</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>pageNum</td>
<td>当前页</td>
<td>number</td>
<td>1</td>
</tr>
<tr>
<td>pageSize</td>
<td>单页数据行数</td>
<td>number</td>
<td>10</td>
</tr>
<tr>
<td>pageSizeOptions</td>
<td>单页数据行数选择器</td>
<td>Array&lt;string&gt;</td>
<td>['10', '20', '50', '100']</td>
</tr>
<tr>
<td>showSizeChanger</td>
<td>显示单页数据行数选择器</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>showQuickJumper</td>
<td>显示快速跳转</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>showTotal</td>
<td>显示总数量</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>showPagination</td>
<td>显示分页器</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>dataField</td>
<td>数据字段名</td>
<td>string</td>
<td>'list'</td>
</tr>
<tr>
<td>data</td>
<td>数据获取函数</td>
<td>(parameter?: any) =&gt; Promise&lt;any&gt;</td>
<td></td>
</tr>
<tr>
<td>sortField</td>
<td>排序字段参数名</td>
<td>string</td>
<td>'sort'</td>
</tr>
<tr>
<td>sortValues</td>
<td>升降序值名 [正序,倒序]</td>
<td>Array&lt;string&gt;</td>
<td>['asc', 'desc']</td>
</tr>
<tr>
<td>orderField</td>
<td>排序列参数名</td>
<td>string</td>
<td>'order'</td>
</tr>
<tr>
<td>titleStyle</td>
<td>顶部样式</td>
<td>CSSProperties</td>
<td></td>
</tr>
<tr>
<td>pageSizeField</td>
<td>单页数据行数量字段名</td>
<td>string</td>
<td>'pageSize'</td>
</tr>
<tr>
<td>pageNoField</td>
<td>当前页数字段名</td>
<td>string</td>
<td>'pageNo'</td>
</tr>
<tr>
<td>totalPageField</td>
<td>总页数字段名</td>
<td>string</td>
<td>'total'</td>
</tr>
<tr>
<td>accessColumns</td>
<td>允许显示的列</td>
<td>Array&lt;string&gt;</td>
<td></td>
</tr>
<tr>
<td>showTools</td>
<td>显示顶部工具栏</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>showSearchForm</td>
<td>显示搜索表单</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>cardBordered</td>
<td>卡片边框</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>cardBodyStyle</td>
<td>卡片内容自定义样式</td>
<td>CSSProperties</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="formproitem" tabindex="-1"><a class="header-anchor" href="#formproitem" aria-hidden="true">#</a> FormProItem</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>hide</td>
<td>是否在列筛选中隐藏</td>
<td>boolean</td>
<td></td>
</tr>
<tr>
<td>sort</td>
<td>排序，为true时，排序参数为dataIndex的下划线格式，或者直接设置string</td>
<td>boolean|string</td>
<td></td>
</tr>
<tr>
<td>formItemType</td>
<td>表单项基础类型，select需要配合selectOptions使用</td>
<td>'select'|‘input'|'timePicker'|'datePicker'</td>
<td></td>
</tr>
<tr>
<td>selectOptions</td>
<td>选择框的下拉选择项</td>
<td>DefaultOptionType[] |(() =&gt; DefaultOptionType[])</td>
<td></td>
</tr>
<tr>
<td>timeFormat</td>
<td>timePicker和datePicker的timeFormat</td>
<td>string</td>
<td></td>
</tr>
<tr>
<td>order</td>
<td>formItem的排序</td>
<td>number</td>
<td></td>
</tr>
<tr>
<td>formItemLabel</td>
<td>表单项的label值</td>
<td>string</td>
<td></td>
</tr>
<tr>
<td>showInForm</td>
<td>是否添加到检索表单中</td>
<td>boolean</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="事件" tabindex="-1"><a class="header-anchor" href="#事件" aria-hidden="true">#</a> 事件</h2>
<p>基于<a href="https://www.antdv.com/components/table-cn#API" target="_blank" rel="noopener noreferrer"><code v-pre>antdv table</code><ExternalLinkIcon/></a>组件，兼容 table 组件除change以外的所有事件</p>
<h2 id="方法" tabindex="-1"><a class="header-anchor" href="#方法" aria-hidden="true">#</a> 方法</h2>
<p>使用<code v-pre>ref</code>获取<code v-pre>table</code>实例调用方法</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
<th>参数</th>
<th>参数说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>refresh</td>
<td>刷新表单</td>
<td>(returnFirstPage:bool)=&gt;void</td>
<td>是否回到第一页</td>
</tr>
</tbody>
</table>
</div></template>
